<template>
  <div class="signup-container">
    <div class="login-version">
      <p class="login-version-text">{{$t('login.version')}}{{define.version}}</p>
    </div>
    <div class="login-content">
      <div class="login-form">
        <img class="login-logo" src="@/assets/images/login_logo1.png" alt="">
        <img class="logotext" src="@/assets/images/logotext.png" alt="">
        <div class="login-tab active1">
          <a class="item active">用户注册</a>
        </div>
        <el-form ref="form" :model="formData" :rules="rules">
          <el-form-item prop="account">
            <el-input
              v-model="formData.account"
              placeholder="请输入账户名"
              prefix-icon="el-icon-user"
              size="large">
            </el-input>
          </el-form-item>

          <el-form-item prop="realName">
            <el-input
              v-model="formData.realName"
              placeholder="请输入用户名"
              prefix-icon="el-icon-user-solid"
              size="large">
            </el-input>
          </el-form-item>

          <el-form-item prop="gender">
            <el-select
              v-model="formData.gender"
              placeholder="请选择性别"
              style="width: 100%"
              size="large">
              <el-option label="男" :value="1" />
              <el-option label="女" :value="0" />
            </el-select>
          </el-form-item>

          <el-form-item prop="password" v-show="false">
            <el-input
              v-model="formData.password"
              show-password>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-input
              v-model="formData.telePhone"
              placeholder="请输入手机号"
              prefix-icon="el-icon-mobile-phone"
              size="large">
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-input
              v-model="formData.email"
              placeholder="请输入邮箱"
              prefix-icon="el-icon-message"
              size="large">
            </el-input>
          </el-form-item>

          <el-button
            type="warning"
            class="login-btn"
            @click="submitForm">
            注册
          </el-button>
          <el-button
            class="login-btn"
            @click="resetForm">
            返回
          </el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { createUser } from '@/api/permission/user'

export default {
  data() {
    return {
      formData: {
        account: '',
        realName: '',
        gender: null,
        telePhone: '',
        email: '',
        education: '',
        birthday: '',
        postalAddress: '',
        entryDate: Date.now()
      },
      avatarUrl: '',
      rules: {
        account: [
          { required: true, message: '请输入账户名', trigger: 'blur' }
        ],
        realName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          createUser(this.formData).then(res => {
            this.$message.success('注册成功,默认密码为123456')
            this.$router.push('/login')
          }).catch(err => {
            this.$message.error(err.message || '注册失败')
          })
        }
      })
    },
    resetForm() {
      this.$refs.form.resetFields()
      this.$router.push('/login')
    },
  }
}
</script>

<style lang="scss" scoped>
@import './signup.scss';

.avatar {
  width: 50px;
  height: 50px;
  display: block;
  margin-bottom: 10px;
  border-radius: 50%;
}

.login-btn {
  width: 45%;
  font-size: 16px;
  margin-bottom: 20px;
  margin-top: 10px;
  margin-left: 3.5%;

  &:first-child {
    margin-right: 10%;
  }
}

::v-deep .el-form-item__content {
  line-height: normal;
}
</style>
